<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <button id="btn1">点击</button>
    <a href="https://www.baidu.com/" id="baidu">百度</a>

    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

<script>
    // 事件发生以后，会产生一个事件对象，作为参数传给监听函数

    // Event对象属性
    // Event.Target 属性返回事件当前所在节点
    // Event.type 属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读

    var btn1 = document.getElementById('btn1')
    btn1.onclick = function(Event){
        console.log(Event.target)
        Event.target.innerHTML = '点击了'
        console.log(Event.type)
    }

    //Event对象方法
    //Event.preventDefault() 方法取消浏览器对当前事件的默认行为，比如点击链接后，浏览器默认会
    // 跳转到另一个页面，使用这个方法以后，就不会跳转了
    var baidu = document.getElementById('baidu')
    baidu.onclick = function(Event){
        Event.preventDefault()
        console.log('点击了百度')
    }
    //Event.stopPropagation()方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数
    //但是不包括在当前节点上其他的事件监听函数
    var box1 = document.getElementById('box1')
    box1.onclick = function(Event){
        console.log('box1')
    }

    var box2 = document.getElementById('box2')
    box2.onclick = function(Event){
        Event.stopPropagation()
        console.log('box2')
    }
</script>